<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="GridView with row-based ContextMenu" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
      <link href="../Act/Resources/StyleSheet.css" rel="stylesheet" type="text/css" />
	<asp:ScriptManagerProxy ID="TheScriptManager" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/Act/Scripts/Common.js" />
            <asp:ScriptReference Path="~/Act/Scripts/BaseScripts.js" />
            <asp:ScriptReference Path="~/Act/Scripts/PopupBehavior.js" />
            <asp:ScriptReference Path="~/Act/Scripts/ContextMenuBehavior.js" />
        </Scripts>
    </asp:ScriptManagerProxy>
    <h3>ACT Context Menu</h3>
    <table>
        <tr>
            <td style="text-align:left">
                <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" 
                CellSpacing="0" CellPadding="3" DataKeyName="ID" SortColumn="Company" 
                SortOrderAscendingImageUrl="~/Images/up.gif" 
                SortOrderDescendingImageUrl="~/Images/dn.gif" 
                SortCommandEvent="onSortCommand" 
                EditCommandEvent="onEditCommand" 
                DeleteCommandEvent="onDeleteCommand" 
                UpdateCommandEvent="onUpdateCommand" 
                CancelCommandEvent="onCancelCommand" 
                RowCreatedEvent="onRowCreated">
                   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
                   <RowStyle CssClass="RowStyle"/>
                   <HeaderStyle CssClass="HeaderStyle"/>
                   <Columns>
                        <AjaxData:GridViewCommandColumn ShowEditButton="true" ShowDeleteButton="true" ShowCancelButton="true" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Customer" DataField="Company" SortField="Company" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Contact" DataField="ContactName" SortField="ContactName" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                        <AjaxData:GridViewBoundColumn HeaderText="Title" DataField="ContactTitle" SortField="ContactTitle" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false" ItemStyle-Wrap="false"/>
                   </Columns>
                </AjaxData:GridView>
            </td>
        </tr>

    </table>
    
        
    <script type="text/javascript">

        var _gridView;

        var  _customers;

        
        function pageLoad(sender, e)
        {
             _gridView = $find('<%= GridView1.ClientID %>');
            loadCustomers();
        }

        function loadCustomers()
        {
       //Need to convert the sortoder which so WS understand
            var sortColumn = _gridView.get_sortColumn();
            var sortOrder = (_gridView.get_sortOrder() == AjaxDataControls.GridViewSortOrder.Descending) ? 'DESC' : 'ASC';

            DataService.GetCustomerList(0, 10, sortColumn, sortOrder, onLoadSuccess);
       
       }

        function onLoadSuccess(result)
        {
             _customers = result.Rows;
            bindCustomers();
       
           
        }

       function bindCustomers()
        {
            _gridView.set_dataSource(_customers);
            _gridView.dataBind();
        }

        function onSortCommand(sender, e)
        {
            _gridView.set_sortColumn(e.get_sortColumn())
            _gridView.set_sortOrder(e.get_sortOrder());
            _gridView.set_editIndex(-1);
            loadCustomers();
        }

        function onEditCommand(sender, e)
        {
            _gridView.set_editIndex(e.get_row().get_rowIndex());
        }

        function onDeleteCommand(sender, e)
        {
            if (confirm('Are you sure you want to delete this customer?'))
            {
                var customerId = _gridView.get_dataKeys()[e.get_row().get_rowIndex()];

                DataService.DeleteCustomer(
                                            customerId,
                                            function(result)
                                            {
                                                if (result == true)
                                                {
                                                    _gridView.set_editIndex(-1);
                                                    loadCustomers();
                                                }
                                            }
                                          );
            }
        }

        function onUpdateCommand(sender, e)
        {
            var row = e.get_row();
            var customerId = _gridView.get_dataKeys()[e.get_row().get_rowIndex()];
            
            
            //Since we support drag and drop the column index may vary, so get the current index first.

            var customerColumnIndex = _gridView.getColumnIndexByHeaderText('Customer');
            var contactColumnIndex = _gridView.getColumnIndexByHeaderText('Contact');
            var titleColumnIndex = _gridView.getColumnIndexByHeaderText('Title');

            //container is the tr, the first childNodes represents all the cell of that tr
            //and the next childNodes points to the elements of that specified cell.
            //Since we only have the textbox in each cell the index 0 points to that
            //textbox.
            var txtCompany = row.get_container().childNodes[customerColumnIndex].childNodes[0];
            var txtContact = row.get_container().childNodes[contactColumnIndex].childNodes[0];
            var txtTitle = row.get_container().childNodes[titleColumnIndex].childNodes[0];

            var customer = e.get_row().get_dataItem();

            customer.Company = txtCompany.value.trim();
            customer.ContactName = txtContact.value.trim();
            customer.ContactTitle = txtTitle.value.trim();

            DataService.UpdateCustomer(
                                        customerId,
                                        customer.Company,
                                        customer.ContactName,
                                        customer.ContactTitle,
                                        function(result)
                                        {
                                            if (result == true)
                                            {
                                                _gridView.set_editIndex(-1);
                                            }
                                        }
                                      );
        }

        function onCancelCommand(sender, e)
        {
            _gridView.set_editIndex(-1);
        }

       
        function onRowCreated(sender, e)
        { var row = e.get_row();
        
           var rowIndex =   e.get_row().get_rowIndex();
           
           var gridviewClientID =  '<%= GridView1.ClientID %>';    

            if (row.get_rowType() == AjaxDataControls.GridViewRowType.Row ||
            row.get_rowType() == AjaxDataControls.GridViewRowType.AlternatingRow)
            {
  
                var contextExtenderID = gridviewClientID + "row" + rowIndex + 'contextM';

//alert(contextExtenderID);
                var contextExtender = $find(contextExtenderID);

                if (contextExtender)
                {
                    //There is a previous instance so we need to remove it.
                    Sys.Application.removeComponent(contextExtender);
                }

                 $create(AjaxControlToolkit.ContextMenuBehavior, 
                 {'id':contextExtenderID,
                'parentid':gridviewClientID,
                'rowIndex':rowIndex,
                'eventArg': e,
                'cssClass':'contextmenu',
                'mouseOverCssClass':'contextmenuhighlight'}, null,null, row.get_container());

                    
             }
        }

        function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
            else if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
        }

    </script>
</asp:Content>